<template>
  <div class="home-container">
    <div class="calendar-container">
      <div class="calendar-header-container">
        <div class="title-with-controls">
          <h2 class="calendar-title">{{ currentYear }}年 {{ currentMonth }}月</h2>
          <div class="calendar-controls">
            <button @click="prevMonth">&lt;</button>
            <button @click="nextMonth">&gt;</button>
          </div>
        </div>
        <div class="calendar-legend">
          <span class="legend-item"><span class="内勤"></span> 内勤</span>
          <span class="legend-item"><span class="外勤"></span> 外勤</span>
        </div>
      </div>
      <div class="calendar-grid">
        <div class="calendar-header">
          <div v-for="day in weekdays" :key="day" class="calendar-day-header">{{ day }}</div>
        </div>
        <div v-for="(week, weekIndex) in calendarWeeks" :key="weekIndex" class="calendar-week">
          <div v-for="(day, dayIndex) in week" :key="dayIndex" class="calendar-day"   :class="{ 'empty-day': !day.date, 'current-day': isCurrentDay(day), 'selected-day': isSelectedDay(day.date), 'weekend-day': dayIndex >= 5 }" @click="selectDate(day.date)" @mouseover="hoverDate(day.date)" @mouseleave="leaveDate()">
            <div v-if="day.date" class="date-number">
              {{ day.date }}
              <span v-if="day.holiday" class="holiday-name">{{ day.holiday }}</span>
            </div>
            <div v-if="day.shifts && day.shifts.length > 0" class="shifts-container">
              <div v-for="shift in day.shifts" :key="shift.id" class="shift-item" >
                <span class="employee-type-badge" :class="`employee-type-${shift.employeeType}`"></span>
                {{ shift.employeeName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shift-details-container">
      <h2 class="details-title">排班详情</h2>
      <div v-if="selectedDate" class="selected-date-info">
        <h3>{{ selectedDate }}<span v-if="selectedDateHoliday">（{{ selectedDateHoliday }}）</span> 排班详情</h3>
        <div v-if="selectedShiftDetails && selectedShiftDetails.length > 0" class="shift-details-list">
          <div v-for="detail in selectedShiftDetails" :key="detail.id" class="shift-detail-item">
            <div class="detail-item-header">
              <span class="employee-type-badge" :class="{'employee-type-内': detail.employeeType === '内', 'employee-type-外': detail.employeeType === '外'}"></span>
              <span class="employee-info">{{ detail.employeeName }}</span>
              <button class="swap-shift-btn" @click="handleSwapShift(detail)">换班</button>
            </div>
            <div class="detail-item-body">
              <p>排班类型: {{ detail.shiftTypeName }}</p>
              <p>工作时间: {{ detail.workTime }}</p>
              <p v-if="detail.note">备注: {{ detail.note }}</p>
            </div>
          </div>
        </div>
        <div v-else class="no-shift-data">
          当日无排班数据
        </div>
      </div>
      <div v-else class="no-date-selected">
        请点击日历中的日期查看详情
      </div>
    </div>
  </div>

  <!-- 换班对话框 -->
    <div v-if="swapShiftVisible" class="mask"></div>
    <div v-if="swapShiftVisible" class="swap-shift-dialog">
      <div class="dialog-header">换班操作</div>
      <div class="dialog-info">
        <p>原值班人员: {{ selectedShift.employeeName }}</p>
        <p>原值班日期: {{ formatDate(selectedShift.schedule_date) }}</p>
      </div>
      <div class="dialog-form-item">
        <label>选择新换班人员</label>
        <select v-model="selectedEmployee">
          <option value="">请选择人员</option>
          <option v-for="employee in applicableEmployees" :key="employee.id" :value="employee.id">
            {{ employee.name }}
          </option>
        </select>
      </div>
      <div class="dialog-form-item">
        <label>选择新换班日期</label>
        <select v-model="selectedScheduleDate">
          <option value="">请选择日期</option>
          <option v-for="schedule in employeeSchedules" :key="schedule.id" :value="schedule">
            {{ schedule.formattedDate }}
          </option>
        </select>
      </div>
      <div class="dialog-footer">
        <button class="btn-cancel" @click="closeSwapShiftDialog">取消</button>
        <button class="btn-confirm" @click="confirmSwapShift">确定</button>
      </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import api from '../services/api';
import { ElMessage } from 'element-plus';

// 日历数据
const currentDate = ref(new Date());
const calendarWeeks = ref([]);
const selectedDate = ref(null);
const selectedDateHoliday = ref('');
const selectedShiftDetails = ref([]);
const shiftsData = ref({});
const schedules = ref([]);
const holidaysMap = ref({});

// 换班相关数据
const swapShiftVisible = ref(false);
const selectedShift = ref(null);
const applicableEmployees = ref([]);
const selectedEmployee = ref(null);
const employeeSchedules = ref([]);
const selectedScheduleDate = ref(null);
const shiftTypes = ref([]);

// 计算属性
const currentShiftType = computed(() => {
  if (!selectedShift.value) return null;
  return shiftTypes.value.find(type => type.id === selectedShift.value.type);
});

// 监听选中的员工变化
watch(selectedEmployee, (newValue) => {
  if (newValue) {
    loadEmployeeSchedules(newValue);
  } else {
    employeeSchedules.value = [];
    selectedScheduleDate.value = null;
  }
});

// 加载排班类型
const loadShiftTypes = async () => {
  try {
    const response = await api.shiftTypes.getAll();
    shiftTypes.value = response || [];
  } catch (error) {
    console.error('获取排班类型数据失败:', error);
  }
};

// 计算当前年月
const currentYear = computed(() => currentDate.value.getFullYear());
const currentMonth = computed(() => currentDate.value.getMonth() + 1);
const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

// 切换月份
const prevMonth = () => {
  currentDate.value = new Date(currentYear.value, currentMonth.value - 2, 1);
  generateCalendar();
};

const nextMonth = () => {
  currentDate.value = new Date(currentYear.value, currentMonth.value, 1);
  generateCalendar();
};

// 生成日历
const generateCalendar = async () => {
  const year = currentYear.value;
  const month = currentMonth.value;

  // 设置日期范围（当月第一天到最后一天）
  const startDate = `${year}-${String(month).padStart(2, '0')}-01`;
  const endDate = `${year}-${String(month).padStart(2, '0')}-${new Date(year, month, 0).getDate()}`;

  // 获取节假日数据
  try {
    const response = await api.holidays.getByRange(startDate, endDate);
    if (response && response.length > 0) {
      const newHolidaysMap = {};
      response.forEach(holiday => {
        // 只处理法定节假日，不处理调休日
        if (holiday.type ) {
          newHolidaysMap[holiday.date] = holiday.name;
        }
      });
      holidaysMap.value = newHolidaysMap;
    } else {
      holidaysMap.value = {};
    }
  } catch (error) {
    console.error('获取节假日数据失败:', error);
    holidaysMap.value = {};
  }

  // 获取排班数据
  try {
    // 从API获取指定日期范围的排班数据
    const response = await api.schedules.getByRange(startDate, endDate);
    shiftsData.value = {};
    schedules.value = response || [];

    // 使用全局排班类型数据
    if (shiftTypes.value.length === 0) {
      try {
        const shiftTypesResponse = await api.shiftTypes.getAll();
        shiftTypes.value = shiftTypesResponse || [];
      } catch (error) {
        console.error('获取排班类型数据失败:', error);
      }
    }

    // 创建排班类型ID到工作时间的映射
    const shiftTypeWorkTimeMap = {};
    shiftTypes.value.forEach(type => {
      shiftTypeWorkTimeMap[type.id] = type.work_time || '';
    });

    if (schedules.value.length > 0) {
      schedules.value.forEach(schedule => {
        const dateStr = schedule.schedule_date;
        if (!shiftsData.value[dateStr]) {
          shiftsData.value[dateStr] = [];
        }
        // 确定班次类型（内勤/外勤）
        const isInternal = schedule.shift_type_name.includes('内勤');
        // 从映射中获取工作时间
        const workTime = shiftTypeWorkTimeMap[schedule.shift_type_id] || '';
        shiftsData.value[dateStr].push({
          id: schedule.id,
          employeeId: schedule.employee_id,
          employeeName: schedule.employee_name,
          employeeType: isInternal ? '内' : '外',
          type: schedule.shift_type_id,
          shiftTypeName: schedule.shift_type_name,
          workTime: workTime,
          note: '', // API中没有提供备注，留空
          schedule_date: schedule.schedule_date
        });
      });
    }
  } catch (error) {
    console.error('获取排班数据失败:', error);
  }

  // 生成日历结构
  const firstDay = new Date(year, month - 1, 1);
  const lastDay = new Date(year, month, 0);
  let firstDayIndex = firstDay.getDay(); // 0-6, 0是周日
  const lastDayDate = lastDay.getDate();

  // 调整firstDayIndex以适应周一为第一天的日历
  // 周日(0) -> 调整为6
  // 周一(1) -> 调整为0
  // 周二(2) -> 调整为1
  // 以此类推
  firstDayIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;

  let weeks = [];
  let currentWeek = [];
  let dayCount = 1;

  // 填充第一周的空白
  for (let i = 0; i < firstDayIndex; i++) {
    currentWeek.push({ date: null, shifts: [] });
  }

  // 填充日期
  for (let i = firstDayIndex; i < 7; i++) {
    const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(dayCount).padStart(2, '0')}`;
    currentWeek.push({
          date: dayCount,
          shifts: shiftsData.value[dateStr] || [],
          holiday: holidaysMap.value[dateStr] || ''
        });
    dayCount++;
  }
  weeks.push(currentWeek);

  // 填充剩余周
  while (dayCount <= lastDayDate) {
    currentWeek = [];
    for (let i = 0; i < 7 && dayCount <= lastDayDate; i++) {
      const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(dayCount).padStart(2, '0')}`;
      currentWeek.push({
        date: dayCount,
        shifts: shiftsData.value[dateStr] || [],
        holiday: holidaysMap.value[dateStr] || ''
      });
      dayCount++;
    }

    // 填充周尾空白
    while (currentWeek.length < 7) {
      currentWeek.push({ date: null, shifts: [] });
    }

    weeks.push(currentWeek);
  }

  calendarWeeks.value = weeks;
};

// 检查是否是今天
const isCurrentDay = (day) => {
  if (!day.date) return false;
  const today = new Date();
  return today.getFullYear() === currentYear.value &&
         today.getMonth() + 1 === currentMonth.value &&
         today.getDate() === day.date;
};

// 显示排班详情
// 选中日期状态
const hoveredDate = ref(null);
const selectedDateValue = ref(null);

const selectDate = (date) => {
  if (date == null) return;
  selectedDateValue.value = date;
  const dateStr = `${currentYear.value}-${String(currentMonth.value).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
  selectedDate.value = dateStr;
  selectedDateHoliday.value = holidaysMap.value[dateStr] || '';
  selectedShiftDetails.value = shiftsData.value[dateStr] || [];
};

const hoverDate = (date) => {
  if (date == null) return;
  hoveredDate.value = date;
};

const leaveDate = () => {
  hoveredDate.value = null;
};

const isSelectedDay = (date) => {
  return selectedDateValue.value === date;
};

const isHoveredDay = (date) => {
  return hoveredDate.value === date;
};

const showShiftDetails = (date) => {
  if (date == null) return;
  const dateStr = `${currentYear.value}-${String(currentMonth.value).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
  selectedDate.value = dateStr;
  selectedShiftDetails.value = shiftsData.value[dateStr] || [];
};

// 处理换班
const handleSwapShift = (detail) => {
  // 存储当前选中的排班信息
  selectedShift.value = detail;
  // 加载适用人员
  loadApplicableEmployees();
  // 重置选择
  selectedEmployee.value = null;
  employeeSchedules.value = [];
  selectedScheduleDate.value = null;
  // 显示换班对话框
  swapShiftVisible.value = true;
  console.log('换班功能被触发，选中的排班:', detail);
};

// 加载当前排班类型的适用人员
const loadApplicableEmployees = async () => {
  if (!currentShiftType.value || !currentShiftType.value.applicable_type) {
    console.error('当前排班类型或适用类型未定义');
    alert('无法加载适用人员，排班类型信息不完整');
    return;
  }
  try {
    const response = await api.employees.getByType(currentShiftType.value.applicable_type);
    // 排除当前要换班的人员
    // 从选中的排班中获取当前员工ID
    const currentShiftEmployeeId = selectedShift.value ? selectedShift.value.employeeId : null;
    applicableEmployees.value = (response.data || [])
      .filter(employee => employee.id !== currentShiftEmployeeId);
  } catch (error) {
    console.error('加载适用人员失败:', error);
    alert('加载适用人员失败，请重试');
  }
};

// 加载选中员工的排班日期（服务器时间今日之后的所有排班）
const loadEmployeeSchedules = async (employeeId) => {
  try {
    // 获取今天之前的30天日期 (服务器时间)
    // const startDate = new Date();
    // startDate.setDate(startDate.getDate() - 30);
    // const formattedStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;

    // // 获取今天之后的30天日期 (服务器时间)
    // const endDate = new Date();
    // endDate.setDate(endDate.getDate() + 30);
    // const formattedEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;

    //取选中排班的日期
    // const selectedDate = new Date(selectedShift.value.schedule_date);

    //获取选中排班日期的前后30天
    // console.log("selectedShift",selectedShift.value.schedule_date);
    const startDate = new Date(selectedShift.value.schedule_date);
    startDate.setDate(startDate.getDate() - 30);
    const formattedStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
    const endDate = new Date(selectedShift.value.schedule_date);
    endDate.setDate(endDate.getDate() + 30);
    const formattedEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;

    //
    // // const today = new Date();
    // const formattedToday = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
    
 
    // 调用API获取今日之后的所有排班
    const response = await api.schedules.getAll({
      employee_id: employeeId,
      start: formattedStartDate,
      end: formattedEndDate 
    });
    console.log('API响应:', response);
    // 过滤出与当前排班类型相同的排班并按日期排序
    console.log('当前排班类型:', selectedShift.value.type);
    employeeSchedules.value = (response || [])
      .filter(schedule => schedule.shift_type_id === selectedShift.value.type)
      .map(schedule => ({
        id: schedule.id,
        date: schedule.schedule_date,
        formattedDate: formatDate(schedule.schedule_date)
      }))
      .sort((a, b) => new Date(a.date) - new Date(b.date));

      console.log('员工排班数据:', employeeSchedules.value);
  } catch (error) {
    console.error('加载员工排班失败:', error);
    alert('加载员工排班失败，请重试');
  }
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};

// 处理换班确认
const confirmSwapShift = async () => {
  if (!selectedEmployee.value || !selectedScheduleDate.value) {
    alert('请选择换班人员和日期');
    return;
  }

  try {
    // 调用API进行换班
    await api.schedules.swapShifts(
      selectedShift.value.id,
      selectedScheduleDate.value.id
    );
    // 关闭对话框
    swapShiftVisible.value = false;
    // 刷新排班数据
    generateCalendar();
    ElMessage.success('换班成功');
  } catch (error) {
    console.error('换班失败:', error);
    ElMessage.error('换班失败，请重试');
  }
};

// 关闭换班对话框
const closeSwapShiftDialog = () => {
  swapShiftVisible.value = false;
  selectedShift.value = null;
  applicableEmployees.value = [];
  selectedEmployee.value = null;
  employeeSchedules.value = [];
  selectedScheduleDate.value = null;
};

// 初始化
onMounted(() => {
  loadShiftTypes();
  generateCalendar();
});
</script>

<style scoped>
/* 基础样式 */
.home-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background-color: #F5F7FA;
  min-height: 100vh;
}

/* 日历容器样式 */
.calendar-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 24px;
  transition: all 0.3s ease;
}

/* 排班详情容器样式 */
.shift-details-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

/* 手机端响应式优化 - 修复宽度溢出问题 */
@media (max-width: 768px) {
  .home-container {
    padding: 2px;
    /* gap: 12px; */
    width: 100%;
    box-sizing: border-box;
  }

  .calendar-container {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .shift-details-container {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* 确保日历网格不会溢出 */
  .calendar-grid {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* 优化日历单元格 */
  .calendar-day {
    width: calc(100% / 7);
    min-width: 60px;
    height: 80px;
    box-sizing: border-box;
  }

  /* 确保排班项不会溢出并增大字体 */
  .shift-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
    font-weight: bolder;
    line-height: 20px;
  }

  /* 优化换班对话框 */
  .swap-shift-dialog {
    width: 90% !important;
    max-width: 400px;
    box-sizing: border-box;
  }
}

/* 日历头部容器样式 */
.calendar-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 10px;
}

.title-with-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 日历标题样式 */
.calendar-title {
  margin: 0;
  color: #1D2129;
  font-size: 22px;
  font-weight: 600;
}

/* 日历控件样式 */
.calendar-controls {
  display: flex;
  gap: 10px;
  margin: 0;
}

.calendar-controls button {
  background-color: #165DFF;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.calendar-controls button:hover {
  background-color: #0E42D2;
  transform: translateY(-1px);
}

.calendar-controls button:active {
  transform: translateY(0);
}

/* 图例样式 */
.calendar-legend {
  display: flex;
  gap: 15px;
  margin: 0;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4E5969;
  font-size: 14px;
}

.内勤, .外勤 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 3px;
}

.内勤 {
  background-color: #FF7D00;
}

.外勤 {
  background-color: #00B42A;
}

/* 日历网格样式 */
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
}

.calendar-header {
  display: flex;
  /* background-color: #F7F8FA; */
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.calendar-day-header {
  flex: 1;
  text-align: center;
  padding: 12px 5px;
  /* border: 1px solid #E5E6EB; */
  color: #4E5969;
}

.calendar-week {
  display: flex;
}

.calendar-day {
  width: calc(100% / 7);
  min-width: 80px;
  height: 100px;
  padding: 5px;
  margin: 2px;
  border-radius: 5px;
  border: 1px solid #E5E6EB;
  position: relative;
  background-color: white;
  transition: all 0.2s ease;
  cursor: pointer;
}

.calendar-day:hover:not(.empty-day) {
  border: 1px solid #165DFF;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
  z-index: 1;
}

.calendar-day.selected-day {
  border: 2px solid #165DFF;
  box-shadow: 0 0 0 1px rgba(22, 93, 255, 0.3);
  z-index: 2;
}



.empty-day {
  background-color: #FAFAFA;
  opacity: 0;
  cursor: default;
}

.weekend-day {
  background-color: #E6F7F0;
}

.current-day {
  background-color: #E6F7FF;
  border: 1px solid #91CBFF;
  position: relative;
}

.current-day::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background-color: #165DFF;
  border-radius: 50%;
}

.date-number {
  font-weight: 600;
  margin-bottom: 6px;
  color: #1D2129;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.holiday-name {
  font-size: 12px;
  font-weight: normal;
  color: #86909C; /* 浅灰色 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 排班项样式 */
.shifts-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 85px;
  overflow-y: auto;
  padding-right: 2px;
}

.shifts-container::-webkit-scrollbar {
  width: 4px;
}

.shifts-container::-webkit-scrollbar-thumb {
  background-color: #C9CDD4;
  border-radius: 2px;
}

.shift-item {
  /* padding: 4px 6px; */
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

/* .shift-item:hover {
  transform: translateX(2px);
  opacity: 0.9;
} */

.employee-type-内 {
  background-color: #FF7D00;
  color: white;
}

.employee-type-外 {
  background-color: #00B42A;
  color: white;
}

/* 员工类型标签样式 */
.employee-type-badge {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  /* margin-right: 6px; */
}

.employee-type-badge.employee-type-内 {
  background-color: #FF7D00;
}

.employee-type-badge.employee-type-外 {
  background-color: #00B42A;
}

.swap-shift-btn {
  margin-left: auto;
  padding: 8px 12px;
  background-color: #4096ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.swap-shift-btn:hover {
  background-color: #69b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.detail-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

/* 排班详情容器样式 */
  .shift-details-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 24px;
    min-height: 320px;
    transition: all 0.3s ease;
  }

  /* 换班对话框样式 */
  .swap-shift-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 101;
  }

  .dialog-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }

  .dialog-form-item {
    margin-bottom: 16px;
  }

  .dialog-form-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .dialog-form-item select {
    width: 100%;
    padding: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
  }

  .dialog-footer button {
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
  }

  .btn-cancel {
    background-color: #f5f7fa;
    color: #606266;
    border: 1px solid #dcdfe6;
  }

  .btn-confirm {
    background-color: #4096ff;
    color: white;
    border: none;
  }

  .btn-confirm:hover {
    background-color: #69b1ff;
  }

  /* 遮罩层样式 */
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
  }

.details-title {
  text-align: center;
  margin-bottom: 24px;
  color: #1D2129;
  font-size: 20px;
  font-weight: 600;
}

.selected-date-info {
  margin-bottom: 20px;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.selected-date-info h3 {
  color: #1D2129;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 600;
}

.shift-details-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shift-detail-item {
  border: 1px solid #E5E6EB;
  border-radius: 8px;
  padding: 16px;
  background-color: #FCFCFD;
  transition: all 0.2s ease;
}

.shift-detail-item:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-color: #C9CDD4;
}

.detail-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.shift-type-badge {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.shift-item.shift-type-1 {
  background-color: #FF7D00;
  color: white;
}

.shift-item.shift-type-3, .shift-item.shift-type-4 {
  background-color: #00B42A;
  color: white;
}

.shift-detail-item.shift-type-1 .employee-info {
  background-color: #FF7D00;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}

.shift-detail-item.shift-type-3 .employee-info, .shift-detail-item.shift-type-4 .employee-info {
  background-color: #00B42A;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}

.employee-info {
  font-weight: 600;
  color: #1D2129;
}

.employee-type {
  margin-left: 6px;
  /* padding: 1px 4px; */
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.shift-detail-item.shift-type-1 .employee-type {
  background-color: #FFF2E8;
  color: #FF7D00;
}

.shift-detail-item.shift-type-3 .employee-type, .shift-detail-item.shift-type-4 .employee-type {
  background-color: #E8FFF0;
  color: #00B42A;
}

.detail-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #4E5969;
  font-size: 14px;
}

.no-shift-data, .no-date-selected {
  text-align: center;
  color: #86909C;
  padding: 40px 0;
  font-size: 14px;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .home-container {
    flex-direction: row;
  }

  .calendar-container {
    flex: 2;
  }

  .shift-details-container {
    flex: 1;
  }
}

@media (max-width: 767px) {
  .calendar-day {
    min-height: 80px;
  }

  .date-number {
    font-size: 12px;
  }

  .shift-item {
    font-size: 14px;
    /* padding: 3px 5px; */
    font-weight: bolder;
  }
}

</style>/style>